<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .base1 {
            color: red;
        }

        .base2 {
            font-size: 40px;
        }
    </style>
</head>
<body>
<!--
    v-bind指令  实现动态操作css样式   class   style

    绑定内联样式
     v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

    绑定class
    v-bind:class 一个对象，以动态地切换 class：

-->
<div id="app">

    <p style="font-size: 40px;color: red">vue 中 v-bind指令实现样式操作 style</p>
    <p v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">vue 中 v-bind指令实现样式操作 style</p>
    <p v-bind:style="styleObject">vue 中 v-bind指令实现样式操作 style</p>

    <hr>

    <p class="base1 base2">vue 中 v-bind指令实现样式操作 class</p>
    <p v-bind:class="{base1:isActiveBase1,base2:isActiveBase2}">vue 中 v-bind指令实现样式操作 class</p>
    <p v-bind:class="classObject">vue 中 v-bind指令实现样式操作 class</p>

    <p v-bind:class="[b1,b2]">vue 中 v-bind指令实现样式操作 [class] </p>

</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            activeColor: 'red',
            fontSize: 40,
            styleObject: {
                color: 'red',
                fontSize: '40px'
            },
            isActiveBase1: true,
            isActiveBase2: true,
            classObject: {
                base1: false,
                base2: true
            },
            b1:'base1',
            b2:'base2'
        },
        methods: {}
    })
</script>
</body>
</html>